import React, { Component } from 'react';
import { Scroller, Touchable,Popup ,Modal  } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
import './index.scss';
//引入一个list的组件
import { List } from '$yo-component';



class Me extends Component {
    //获取数据
    constructor(getData) {
        super(getData);
        this.state = {
            getData:[
                {key:1}
            ],
            treeData:[
                {key:1}
            ],
            show:false,
            show2:false
        };
    }
    componentDidMount() {
        fetch('http://oyodho8ih.bkt.clouddn.com/db/dbMe.json')
            .then((response)=> {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json();
            })
            .then((stories)=> {
                const getData = stories;
                this.setState({
                    getData
                })
            });
        fetch('http://oyodho8ih.bkt.clouddn.com/db/dbTree12.json')
            .then((response)=> {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json();
            })
            .then((stories)=> {
                const treeData = stories;
                console.log(treeData[1])
                this.setState({
                    treeData
                })
            });
    }

    render() {
        let guid = -1;
        return (

            <div className="yo-flex my-me yo-list" >
                <Modal
                    show={this.state.show}
                    align="center"
                    animation={{animation: ['zoom-in-down', 'zoom-out-down'], duration: 800}}
                    onMaskTap={()=>{
                        this.setState({
                            show:false
                        })
                    }}
                >
                    <img style={{width:'2rem',height:'2rem'}} src="http://oyodho8ih.bkt.clouddn.com/images/weChar.png"/>
                </Modal>
                {/*个人介绍*/}
                <Popup show={this.state.show2}
                 duration={900}
                 onMaskTap ={()=>{
                     this.setState({
                         show2:false    
                     })
                 }}
                 >
                    <div className="myisme">
                        <h4>我为我"带盐"</h4>
                        <p>上进心强；团队意识强；能快速接纳新的知识；具有很强的求知欲；最重要一点，我还年轻，不怕失败！</p>
                    </div>
                </Popup>
                <Header title="不一样的烟火" right={{ title: '点我', onTap: () => {
                    this.setState({
                        show2:true
                    })
                }}}/>
                {/*中间滚动的履历栏目*/}
                <Scroller
                 ref='list'
                 extraClass="flex"
                 usePullRefresh={true}
                 onRefresh={() => {
                     setTimeout(() => {
                        //  this.refresh();
                         this.refs.list.stopRefreshing(true);
                     }, 500);
                 }}
                 useLoadMore={true}
                 onLoad={() => {
                     setTimeout(() => {
                        //  this.fetch();
                         this.refs.list.stopLoading(true);
                     }, 500);
                 }}
                >
                    {/*普通列表页*/}
                    <a href="javascript:;" className="header my-interval">
                        <img className="headerImg" src="http://oyodho8ih.bkt.clouddn.com/images/me.png" alt="我" />
                        <div className="my-flex">
                            <h3 className="title">会飞的鱼</h3>
                            <p className="detail my-introduce">
                            我是菜，但我不会一直的菜下去;<br/>
                            我是狂，我要我狂的有水准</p>
                        </div>
                        <Touchable
                        touchClass="touchable-opacity"
                        onTap={()=>{
                            this.setState({
                                show:true
                            })
                        }}
                        >
                        <div className="my-flex my-weChar">
                            <img src="http://oyodho8ih.bkt.clouddn.com/images/weChar.png"/>
                        </div>
                        </Touchable>
                        
                    </a>
                    <h3 className="my-label">基本信息：</h3>
                    <div className="item2">
                    <div className="flex">
                        <i className="iconfont iconInterval">&#xe68f;</i>
                        姓名：{this.state.getData[0].name}</div>
                        <div className="other"> 
                            <i className="iconfont" style={{color:'#999999'}}>&#xe61f;</i>
                        </div>
                    </div>
                    <div className="item2">
                        
                        <div className="flex">
                        <i className="iconfont iconInterval">&#xe710;</i>
                        性别：{this.state.getData[0].sex}</div>
                        <div className="other">
                        </div>
                    </div>
                    <div className="item2">
                    <div className="flex">
                    <i className="iconfont iconInterval">&#xe716;</i>
                    出生日期：{this.state.getData[0].bir}</div>
                        <div className="other">
                        </div>
                    </div>
                    
                    <div className="item2">
                        <div className="flex">
                    <i className="iconfont iconInterval">&#xe603;</i>
                        联系电话：{this.state.getData[0].tel}</div>
                        <div className="other">
                            消息
                        <sup className="yo-badge"></sup>
                        </div>
                    </div>
                    <div className="item2">
                        <div className="flex">
                        <i className="iconfont iconInterval" style={{color:""}}>&#xe6a6;</i>
                        weChat: {this.state.getData[0].weChat}</div>
                        <div className="other">
                            <span className="yo-badge">2</span>
                        </div>
                    </div>
                    <h3 className="my-label">教育背景：</h3>
                    <div className="item2">
                        <div className="flex">
                    <i className="iconfont iconInterval">&#xe63a;</i>
                        School: {this.state.getData[0].school}</div>
                        <div className="other">
                        </div>
                    </div>
                    <div className="item2">
                    <div className="flex">
                    <i className="iconfont iconInterval">&#xe608;</i>
                    Magor: {this.state.getData[0].major}</div>
                        <div className="other">
                            <span className="yo-badge yo-badge-tag">对口</span>
                        </div>
                    </div>
                    <div className="item2">
                    <div className="flex">
                    <i className="iconfont iconInterval">&#xe60a;</i>
                    Graduate: {this.state.getData[0].graduate}</div>
                        <div className="other">
                            <span className="yo-badge">9</span>
                        </div>
                    </div>
                    <div className="item2">
                    <div className="flex">
                    <i className="iconfont iconInterval">&#xe63d;</i>
                    Worktitel: {this.state.getData[0].worktitel}</div>
                        <div className="other">
                            <span className="yo-badge yo-badge-tag">证书</span>
                        </div>
                    </div>
                    <h3 className="my-label">求职意向：</h3>
                    <div className="item2">
                        <div className="flex">
                    <i className="iconfont iconInterval">&#xe600;</i>
                        JobCategory：{this.state.getData[0].jobCategory}</div>
                        <div className="other">
                            <i className="iconfont iconInterval" style={{color:"#FFCC33"}}>&#xe717;</i>
                        </div>
                    </div>
                    <div className="item2">
                        <div className="flex">
                    <i className="iconfont iconInterval">&#xe65f;</i>
                        Address：{this.state.getData[0].address}</div>
                        <div className="other">
                            <span className="yo-badge yo-badge-tag">更多</span>
                        </div>
                    </div>
                    
                    <h3 className="my-label">浪迹江湖：</h3>
                    <ul className="yo-timeline">
                        <li className="item">
                            <time className="time">{this.state.treeData[0].timer}</time>
                            <div className="detail">{this.state.treeData[0].content}</div>
                        </li>
                        <li className="item">
                            <time className="time">15-03</time>
                            <div className="detail">南昌凯峰软件有限责任公司实习生</div>
                        </li>
                        <li className="item">
                            <time className="time">11-09</time>
                            <div className="detail">毕业于南昌大学11级计算机网络技术专业</div>
                        </li>
                    </ul>
                </Scroller>
                {/*//底部导航tab*/}
                <Footer indexLink='false'indexLink2='false' indexLink3='false' indexLink4='true' />
            </div>
        )
    }
}

export default Me;
